<template>
  <el-container>
    <div
      style="background-color: #fff; margin: 20px 0 ;box-shadow: 10px 10px 18px 0 rgba(0,0,0,.12);border-radius:3px;">
      <el-row style="margin: 1% auto;font-size:20px;text-align: center;">施工管理</el-row>
      <!-- 头部的查询输入框 -->
      <el-form :model="temp_bussi" ref="temp_bussi" :inline="true" style="margin: 1% auto; text-align:center;"
        label-width="200px">
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="业务编号" prop="applyCode">
              <el-input v-model="temp_bussi.applyCode"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="申请人" prop="name">
              <el-input v-model="temp_bussi.name"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="证件号" prop="idCard">
              <el-input v-model="temp_bussi.idCard"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="乡镇街道" v-if="townState" prop="townCode">
              <el-select v-model="temp_bussi.townCode" placeholder="请选择乡镇街道" style="width:100%" @change="townChange">
                <el-option label="请选择乡镇街道" value></el-option>
                <el-option v-for="(item) in temp_bussi.townList" :key="item.code" :label="item.name" :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="到场状态" v-else prop="taskState">
              <el-select v-model="temp_bussi.taskState" placeholder="请选择到场状态">
                <el-option label="未到场" value="0"></el-option>
                <el-option label="已到场" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="村组社区" prop="villageCode">
              <el-select v-model="temp_bussi.villageCode" placeholder="请选择村组社区">
                <el-option label="请选择村组社区" value></el-option>
                <el-option v-for="item in temp_bussi.villageList" :key="item.code" :label="item.name"
                  :value="item.code"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8" style="padding-right: 30px">
            <el-form-item>
              <el-button type="primary" @click="submitForm('temp_bussi')">搜索</el-button>
              <el-button @click="resetForm('temp_bussi')">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-card style="margin-top:10px width:100%">

      <el-table @row-dblclick="initPro" v-loading="tableLoding" :data="tempTableData.data" style="width: 100%"
        @selection-change="handleSelectionChange" :row-class-name="tableRowClassName">
        <el-table-column prop="applyCode" label="业务编号" align="center" sortable></el-table-column>
        <el-table-column prop="name" label="申请人" width="100" align="center"></el-table-column>
        <el-table-column prop="idCard" label="证件号" align="center"></el-table-column>
        <el-table-column prop="townName" label="乡镇街道" align="center"></el-table-column>
        <el-table-column prop="villageName" label="村组社区" align="center"></el-table-column>
        <el-table-column prop="lastTime" label="提交时间" align="center"></el-table-column>
        <el-table-column prop="maxTime" label="剩余时间" align="center" :formatter="formatMaxTime" sortable>
        </el-table-column>
        <el-table-column prop="taskState" label="到场状态" align="center" :formatter="taskState" sortable></el-table-column>
        <el-table-column prop="operation" label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="initPro(scope.row)" type="primary">处理</el-button>
            <!-- <el-button size="mini" v-if="currentCode==='5001140000'" @click="updatePro(scope.$index, scope.row)">编辑</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination @size-change="changePageSize" @current-change="changeCurrentPage" @prev-click="prevPage"
          @next-click="nextPage" :current-page="tempTableData.currentPage" :page-sizes="[5, 10, 15, 20]"
          :page-size="tempTableData.pageSize" layout="total, sizes, prev, pager, next, jumper"
          :total="tempTableData.total"></el-pagination>
      </div>

    </el-card>
    <el-footer></el-footer>
  </el-container>
</template>

<script>
  import {
    getConstructionListApi
  } from "@/api/constructionApi";
  import store from "@/vuex/store";
  import config from "@/config/config";
  import {
    getDataListApi
  } from "@/api/permissionApi";
  import {
    getChildrenAddress
  } from "@/api/addressDictionary";

  export default {
    data() {
      return {
        currentCode: store.getters.currentCode,
        temp_bussi: {
          townState: false,
          applyCode: "",
          region: "",
          idcard: "",
          address: "",
          name: "",
          townList: [{
            name: "",
            code: ""
          }],
          villageList: [{
            name: "",
            code: ""
          }],
          townCode: "",
          villageCode: "",
          currentPage: 1,
          pageSize: 5,
          total: 0,
        },

        tableData: {
          //表格data
          data: [{
            name: "曹操"
          }],
          currentPage: 1,
          pageSize: 5,
          total: 0,
          type: 0,
        },
        tempTableData: {
          //表格data
          data: [{
            name: "",
            id: "",
            idcard: "",
            address: "",
            czsq: "",
            state: "",
          }, ],
          currentPage: 1,
          pageSize: 5,
          total: 0,
          type: 0,
        },
        tableLoding: false, //表格加载
        changeRow: [],
        formData: {
          appKey: "",
          appFlag: 2,
          token: store.getters.token,
          versionCode: 0,
          param: "",
        },
      };
    },
    created: function () {
      this.showTown();
      this.getConstructionList();
      getChildrenAddress(this.currentCode).then((townList) => {
        if (this.currentCode.length > 9) {
          this.temp_bussi.townList = townList.data.data;
        } else {
          this.temp_bussi.villageList = townList.data.data;
        }
      });
    },
    methods: {
      formatMaxTime(row) {
        if (row.maxTime < 0) {
          return "已超时" + (row.maxTime - 2 * row.maxTime) + "天";
        }
        if (row.maxTime == 0) {
          return "今日最后一天";
        }
        if (row.maxTime > 0) {
          return row.maxTime + "天"
        }
      },
      tableRowClassName({
        row,
        rowIndex
      }) {
        if (row.maxTime <= row.warningTime && row.maxTime > row.expireTime) {
          return "success-row"; //警告背景
        } else if (row.maxTime <= row.expireTime) {
          return "warning-row"; //到期背景
        } else {
          return "";
        }
      },
      //改变乡镇
      townChange(index) {
        if (this.temp_bussi.townCode) {
          getChildrenAddress(this.temp_bussi.townCode).then((villageList) => {
            this.temp_bussi.villageList = villageList.data.data;
          });
        }
      },
      getConstructionList() {
        this.tableLoding = true;
        getConstructionListApi(this.temp_bussi)
          .then((response) => {
            // console.log(response.data.data.items);
            this.tempTableData.data = response.data.data.items;
            this.tempTableData.total = response.data.data.total;
            if (response.data.data.total != 0) {
              var warningCount = 0;
              var ecount = 0;
              response.data.data.items.forEach(element => {
                element.maxTime < element.warningTime && element.maxTime > element.expireTime ? warningCount++ :
                  ''; //警告时间节点数
                element.maxTime < element.expireTime ? ecount++ : ''; //到期时间节点数
              });
              if (warningCount != 0 || ecount != 0) {
                this.$message({
                  message: "您有" + warningCount + "条业务到了时间警告节点!!  " + ecount + "条业务即将过期! 请尽快处理！！！",
                  center: true,
                  type: "error"
                });
              }
            }
            this.tableLoding = false;
          })
          .catch((error) => {
            this.$message({
              showClose: true,
              message: error,
              type: "error",
            });
            this.tableLoding = false;
          });
      },
      initPro(row) {
        row.active = 2;
        row.townList = this.temp_bussi.townList;
        row.stateName = "施工管理";
        getChildrenAddress(row.townCode).then((villageList) => {
          row.villageList = villageList.data.data;
          this.$router.push({
            path: "./details",
            query: row,
          });
        });
      },
      //提交搜索
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            getConstructionListApi(this.temp_bussi)
              .then((response) => {
                this.tempTableData.data = response.data.data.items;
                this.tempTableData.total = response.data.data.total;
                this.tableLoding = false;
                this.$message({
                  showClose: true,
                  message: "搜索成功",
                  type: "success",
                });
              })
              .catch((error) => {
                this.$message({
                  showClose: true,
                  message: error.data.respondMessage,
                  type: "error",
                });
              });
          } else {
            return false;
          }
        });
      },
      // 清空表单选项
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.$refs[formName].validate((valid) => {
          if (valid) {
            getConstructionListApi(this.temp_bussi)
              .then((response) => {
                this.tempTableData.data = response.data.data.items;
                this.tempTableData.total = response.data.data.total;
                this.tableLoding = false;
                this.$message({
                  showClose: true,
                  message: "重置成功",
                  type: "success",
                });
                //this.resetForm(formName);
              })
              .catch((error) => {
                this.$message({
                  showClose: true,
                  message: error.data.respondMessage,
                  type: "error",
                });
              });
          } else {
            return false;
          }
        });
      },
      changePageSize(val) {
        this.temp_bussi.pageSize = val;
        this.getConstructionList();
      },
      changeCurrentPage(val) {
        this.temp_bussi.currentPage = val;
        this.getConstructionList();
      },
      prevPage(val) {
        this.temp_bussi.currentPage = val;
        this.getConstructionList();
      },
      nextPage(val) {
        this.temp_bussi.currentPage = val;
        this.getConstructionList();
      },

      handleSelectionChange(val) {
        this.changeRow = val;
      },
      selectable(row, index) {
        if (row.show == 0) {
          return false;
        } else {
          return true;
        }
      },

      //表格的序号
      indexMethod(index) {
        return index * 2;
      },

      //状态
      showChangeData: function (row, column) {
        return row.state == "1" ?
          "收件" :
          row.state == "2" ?
          "资料审查" :
          row.state == "3" ?
          "规划许可" :
          row.state == "4" ?
          "施工管理" :
          row.state == "5" ?
          "竣工验收" :
          row.state == "6" ?
          "归档" :
          "未知";
      },
      //控制显示乡镇街道显示状态
      showTown() {
        if (this.currentCode.length > 9) {
          this.townState = true;
        } else {
          this.temp_bussi.townCode = this.currentCode;
          this.townState = false;
        }
      },
      //到场情况
      taskState(row) {
        return row.taskState == "0" ?
          "未到场" :
          row.taskState == "1" ?
          "已到场" :
          "未知";
      },

      updatePro(index, row) {
        this.$router.push({
          path: "./updatePro",
          query: row,
        });
      },
    },
  };
</script>

<style>
  .headDiv div {
    display: inline-block;
  }

  .container {
    font-size: 20px;
  }

  .el-container {
    height: auto;
  }

  .el-table .warning-row {
    color: red;
  }

  .el-table .warning-row .el-button--primary {
    color: white;
    background: red;
    border: red;
  }

  .el-table .success-row {
    color: orange;
  }

  .el-table .success-row .el-button--primary {
    color: white;
    background: orange;
    border: orange;
  }
</style>